import React, { FC  } from 'react';
import { Link } from 'react-router-dom';
import './index.less';

export interface IResource {
  id: number | string;
  img: string;
  name: string,
  description: string;
  loved: number;
}

type ResourceCardProps = IResource & {
  className?: string;
}

export const ResourceCard: FC<ResourceCardProps> = (props) => {
  const { id, name, img, description, loved, className } = props;

  return (
    <div className={ `card ${className}` }>
      <Link className='card-main' to={ `/detail/${id}` }>
        <img src={ img } alt={ name } />
        <div className='info'>
          <p className='info-name'>{ name }</p>
          <p className='info-desc'>{ description }</p>
        </div>
      </Link>
      <div className='card-bottom'>
        <div className='item'>♥{ loved }</div>
        <div className='item'>♥{ loved }</div>
      </div>
    </div>
  );
};
